<template>
    <div>
        <el-card class="infoCard" shadow="hover">
            <el-form :model="infoForm" :rules="infoRule" ref="infoForm" :label-position="labelPosition">
                <el-form-item v-if="role==1">
                    <div style="float:left"><img src="../../assets/image/storeR.png"></div>
                </el-form-item>
                <el-form-item v-if="role==2">
                    <div style="float:left"><img src="../../assets/image/buyR.png"></div>
                </el-form-item>
                <el-form-item  v-if="role==1" prop="store" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="infoForm.storename" placeholder="店铺名称" @keyup.enter.native="infoForm('infoForm')"></el-input>
                </el-form-item>
                <el-form-item v-if="role==2" prop="customer" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="infoForm.customername" placeholder="昵称" @keyup.enter.native="infoForm('infoForm')"></el-input>
                </el-form-item>
                <el-form-item prop="phone" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="infoForm.phone" placeholder="手机号" @keyup.enter.native="infoForm('infoForm')"></el-input>
                </el-form-item>
                <el-form-item prop="addr" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="infoForm.address" placeholder="详细地址" type="textarea" @keyup.enter.native="infoForm('infoForm')"></el-input>
                </el-form-item>

                <el-form-item prop="balance" style="margin-top:10px;margin-bottom: 0px">
                    账户余额：{{infoForm.balance}}
                </el-form-item>
                <el-form-item prop="score" v-if="role==1" style="margin-top: 10px;margin-bottom: 0px">
                    店铺评分:
                    <el-input v-model="infoForm.score" placeholder="评分" type="textarea" @keyup.enter.native="infoForm('infoForm')" disabled></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="submitForm('infoForm')" class="submitBtn"
                               onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                               onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                               round >修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {isMobile, isvalidNull} from "../util";
    import Cookie from 'js-cookie'
    import POST from "../../api/POST"
    export default {
        props:['role'],
        name: "infoManage",
        data() {
            var validateStore = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('店铺名称不能为空'))
                } else {
                    callback()
                }
            }
            var validateCus = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('昵称不能为空'))
                } else {
                    callback()
                }
            }
            var validatePhone = (rule, value, callback) => {
                if (!isMobile(value)) {
                    callback(new Error('联系方式格式不正确'))
                } else {
                    callback()
                }
            }
            var validateAddr = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('地址不能为空'))
                } else {
                    callback()
                }
            }

            return{
                labelPosition: 'left',
                infoForm: {
                    store:'',
                    customer:'',
                    phone:'',
                    addr:'',
                    balance:'',
                    score:''
                },
                infoRule: {
                    storename:[
                        { required: true, trigger: 'blur', validator: validateStore }
                    ],
                    customername:[
                        { required: true, trigger: 'blur', validator: validateCus }
                    ],
                    phone:[
                        { required: true, trigger: 'blur', validator: validatePhone }
                    ],
                    address:[
                        { required: true, trigger: 'blur', validator: validateAddr }
                    ]
                }
            }
        },
        methods: {
            async submitForm (infoForm) {
                this.$refs.infoForm.validate(valid => {
                    if (valid) {
                        if(this.infoForm.hasOwnProperty('customername')){
                            //消费者
                            let data = this.infoForm
                            data.token = Cookie.get('token')
                            POST.userupdate(data).then(res=>{
                                if(res.code===200){
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }

                            })
                        }
                        else {
                            //生产者
                            let data = this.infoForm
                            data.token = Cookie.get('token')
                            POST.salerupdate(data).then(res=>{
                                if(res.code===200){
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                            })

                        }


                    } else {
                        console.log('error submit!!')
                    }
                })
            },
            getInfo(){
                let data = {
                    token:Cookie.get('token')
                }
                POST.personinf(data).then(res=>{
                    this.infoForm = res
                })
            }
        },
        mounted() {
            this.getInfo()
        }
    }
</script>

<style scoped>
    .infoCard {
        padding: 20px;
        width: 30%;
        margin-right: 35%;
        margin-left: 35%;
        margin-top: 2%;
    }
    .submitBtn {
        width: 100%;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: #ff7a88;
        border:solid 2px #ff7a88;
    }

</style>
